<template>
	<view class="container">
		<!--轮播图.开始-->
		<view class="goods-head" :class="currentIndex%2===0?'':'next'">
			<view class="head-box" :style="headStyle">
				<text @click="toggleMenu('show')" class="left iconfont icon-list"></text>
				<navigator url="../search/search?t=1" class="search iconfont icon-search">输入商品关健词</navigator>
				<navigator open-type="switchTab" url="../account/index" class="right iconfont icon-user"></navigator>
			</view>
			<swiper circular indicator-dots autoplay :current="currentIndex" @change="swiperChange" class="swiper-box">
				<swiper-item v-for="(item,index) in bannerList.banner" :key="index">
					<view class="swiper-item">
						<image mode="widthFix" :src="item.filePath"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!--轮播图.结束-->
		
		<!--菜单列表.开始-->
		<view class="nav-box">
			<navigator url="../goods/sale" class="item-box">
				<text class="iconfont icon-shopping icon red"></text>
				<text class="title">抢购</text>
			</navigator>
			<navigator url="../goods/presell" class="item-box">
				<text class="iconfont icon-time icon"></text>
				<text class="title">预售</text>
			</navigator>
			<navigator url="../convert/list" class="item-box">
				<text class="iconfont icon-point icon yellow"></text>
				<text class="title">换购</text>
			</navigator>
			<navigator url="../goods/coupon" class="item-box">
				<text class="iconfont icon-ticket icon green"></text>
				<text class="title">领券</text>
			</navigator>
			<navigator open-type="switchTab" url="../goods/category" class="item-box">
				<text class="iconfont icon-category icon grey"></text>
				<text class="title">分类</text>
			</navigator>
		</view>
		<!--菜单列表.结束-->
		
		<!--限时抢购.开始-->
		<view class="group-box">
			<view class="ntitle">
				<view class="left">
					<text class="h3">限时抢购</text>
				</view>
				<view class="right">
					<navigator url="sale" class="more">更多</navigator>
				</view>
			</view>
			
			<scroll-view scroll-x="true" :scroll-left="60" class="sale-wrap">
				<view class="sale-list">
					<navigator v-for="(item,index) in saleList" 
						:key="index" 
						:url="'show?id='+item.goodsProduct.shopGoods.id+'&pid='+item.goodsProduct.id" 
						class="list-box">
						<view class="img-box">
							<image mode="widthFix" :src="$api.loadFile(item.goodsProduct.imgUrl?item.goodsProduct.imgUrl:item.goodsProduct.shopGoods.imgUrl)"></image>
						</view>
						<view class="txt-box">
							<text class="title">{{item.title}}</text>
							<view class="price">
								<text>￥{{item.price}}</text>
								<text class="original">￥{{item.goodsProduct.sellPrice}}</text>
							</view>
						</view>
					</navigator>
				</view>
			</scroll-view>
			
		</view>
		<!--限时抢购.结束-->
		
		<!--分类列表.开始-->
		<view v-for="(item,index) in categoryList" :key="index" class="group-box">
			<view class="ntitle">
				<view class="left">
					<text class="h3">{{item.title}}</text>
				</view>
				<view class="right">
					<navigator :url="'list?cid='+item.id" class="more">更多</navigator>
				</view>
			</view>
			
			<view class="img-list">
				<navigator 
					v-for="(gitem,gindex) in item.goodsList" 
					:key="gindex" 
					:url="'show?id='+gitem.id"
					class="list-box">
					<view class="img-box">
						<image mode="widthFix" :src="$api.loadFile(gitem.imgUrl)"></image>
					</view>
					<view class="txt-box">
						<text class="title">{{gitem.title}}</text>
						<view class="price">
							<text class="sell">{{gitem.sellPrice}}</text>
							<text class="original">{{gitem.marketPrice}}</text>
						</view>
					</view>
				</navigator>
			</view>
			
		</view>
		<!--分类列表.结束-->
		
		<!--底部.开始-->
		<view class="footer">
			<view class="copyright">
				<text>版权所有 © 2009-2024 大连仟亿科技有限公司</text>
				<navigator open-type="redirect" url="https://beian.miit.gov.cn">辽B2-20170242-8</navigator>
			</view>
		</view>
		<!--底部.结束-->
		
		<!--菜单窗体.开始-->
		<dt-drawer ref="drawerMenu" mode="left">
			<view class="nav-side">
				<view class="head-tit">导航菜单</view>
				<navigator url="../goods/index" class="list-box">
					<text class="icon iconfont icon-home-plain"></text>
					<text class="text">首页</text>
				</navigator>
				<navigator url="../goods/sale" class="list-box">
					<text class="icon iconfont icon-shopping"></text>
					<text class="text">抢购</text>
				</navigator>
				<navigator url="../goods/presell" class="list-box">
					<text class="icon iconfont icon-time"></text>
					<text class="text">预售</text>
				</navigator>
				<navigator url="../convert/list" class="list-box">
					<text class="icon iconfont icon-point"></text>
					<text class="text">换购</text>
				</navigator>
				<navigator url="../goods/coupon" class="list-box">
					<text class="icon iconfont icon-ticket"></text>
					<text class="text">领券</text>
				</navigator>
			</view>
		</dt-drawer>
		<!--菜单窗体.结束-->
		
	</view>
</template>

<script>
	import dtDrawer from "@/components/dt-drawer/dt-drawer.vue";
	export default {
		components: {
			dtDrawer
		},
		data() {
			return {
				currentIndex: 0,
				headStyle: "",
				bannerList: {
					title: '首页幻灯片',
					banner:[
						{'filePath': '../../static/banner/banner-1.jpg'},
						{'filePath': '../../static/banner/banner-2.jpg'},
						{'filePath': '../../static/banner/banner-3.jpg'},
					]
				},
				categoryList: [],
				saleList: [],
			}
		},
		methods: {
			//点击左侧菜单
			toggleMenu(type){
				this.$refs.drawerMenu.toggle(type);
			},
			//幻灯片索引
			swiperChange(e){
				this.currentIndex=e.detail.current;
			},
			//初始化数据
			async initData(){
				let _this = this;
				//正在加载
				uni.showLoading({
				    title: '加载中'
				});
				//加载抢购商品前10条
				await _this.$api.request({
					url: `/client/shop/speed/view/10`,
					method: "get"
				}).then(res => {
					_this.saleList = res.data;
				});
				//加载前6条一级分类列表
				await _this.$api.request({
					url: `/client/shop/goods/view/10/6`,
					method: "get"
				}).then(res => {
					//console.log(res.data)
					_this.categoryList = res.data;
					
				});
				//关闭加载
				uni.hideLoading();
			}
		},
		//页面初始化
		onLoad(options){
			this.initData();
		},
		onPageScroll : function(e) {
			//滚动条改变头部透明度
			if(e.scrollTop<200){
				let alphaNum=e.scrollTop/200;
				this.headStyle="background:rgba(255,255,255,"
					+alphaNum+");box-shadow:0 0 3px rgba(243,243,243,"+alphaNum+");"
			}
			else if(e.scrollTop>200){
				this.headStyle="color:#666;background:rgba(255,255,255,1);box-shadow:0 0 3px rgba(243,243,243,1);";
			}
		},
	}
</script>

<style lang="scss">
	.goods-head{
		display: block;
		position: relative;
		padding-top: 54px;
		width: 100%;
		height: 354rpx;
		background: #fff;
		overflow: hidden;
		&::before{
			content: "";
			display: block;
			position: absolute;
			top: -300rpx;
			left: -300rpx;
			right: -300rpx;
			bottom: 14rpx;
			background: #d20808;
			border-radius: 50%;
			overflow: hidden;
		}
		&.next::before{
			background: #67217a;
		}
		.head-box{
			position: fixed;
			top: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 48px;
			line-height: 48px;
			color: #f2f2f2;
			background: rgba($color: #fff, $alpha: 0);
			box-shadow: 0 0 3px rgba($color: #f3f3f3, $alpha: 0);
			z-index: 1;
			.left {
				padding: 0 24rpx;
				font-size: 18px;
			}
			.right {
				padding: 0 24rpx;
				font-size: 18px;
			}
			.search {
				flex-grow: 1;
				padding: 5px 0;
				height: 22px;
				line-height: 22px;
				border-radius: 20px;
				color: #a2a2a2;
				font-size: 14px;
				background: rgba(243, 243, 243,.9);
				&::before{
					margin-left: 20px;
					margin-right: 5px;
				}
			}
		}
		.swiper-box{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 8rpx;
			height: 354rpx;
			.swiper-item{
				margin: 0 24rpx;
				height: 350rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				overflow: hidden;
				box-shadow: 0 0 8rpx rgba($color: #000, $alpha: 0.3);
				image{
					width: 100%;
				}
			}
		}
	}
</style>